<template>
	<view class="Visitor">
		<view v-if="hasCustomer" class="hasCustomer">
			<view class="title_top">
				<u-row gutter="16">
					<u-col span="4">
						<view class="demo-layout bg-purple">账套名</view>
						<view class="demo-layout bg-purple">{{Customer.CName}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">持卡人</view>
						<view class="demo-layout bg-purple-light">{{form.PName}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-dark">关联卡号</view>
						<view class="demo-layout bg-purple-dark">{{form.CardData}}</view>
					</u-col>
					<u-col span="2">
						<u-button size="mini" type="error" @click="delCustomer">删除</u-button>
					</u-col>
				</u-row>
				
			</view>
			<view class="imgBox">
				<view style="width: 100%; font-size: 30upx; text-align: center; background-color: rgba(0,0,0,.3);position: absolute;top: 0;left: 0;z-index: 9999;color: #FFFFFF;">
					点击图片更换
				</view>
				<avatar selWidth="540upx" selHeight="720upx" expWidth="420upx" expHeight="560upx" @upload="myUpload" :quality='.9'
				 bgImg='rgba(0,0,0,0)' :avatarSrc="url" avatarStyle="width: 250upx; height: 333.33upx;border-radius:0%;">
				</avatar>
			</view>
			<view class="Form_vis">
				<u-form :model="form" ref="uForm">
					<u-form-item　left-icon='account' :border-bottom='false' label="名　称" :label-width="170">
						<u-input v-model="form.PName" />
					</u-form-item>
					<u-form-item　left-icon='phone-fill' :border-bottom='false' label="编　号" :label-width="170">
						<u-input disabled v-model="form.PCode" />
					</u-form-item>
					<u-form-item　left-icon='coupon' :border-bottom='false' label="部　门" :label-width="170">
						<u-input disabled v-model="form.DeptName" />
					</u-form-item>
					<u-form-item　left-icon='man-add' :border-bottom='false' label="卡　号" :label-width="170">
						<u-input v-model="form.CardData" />
					</u-form-item>
					<u-form-item　left-icon='chat' :border-bottom='false' label="手机号" :label-width="170">
						<u-input v-model="form.MobilePhone" />
					</u-form-item>
					<u-form-item　left-icon='order' :border-bottom='false' label="证件号" :label-width="170">
						<u-input v-model="form.IdentityCard" />
					</u-form-item>
					<u-form-item　left-icon='calendar' :border-bottom='false' label="密　码" :label-width="170">
						<u-input v-model="form.PPassword" />
					</u-form-item>
				</u-form>
			</view>
			<!-- 底部按钮 -->
			<view class="foot_vis">
				<view style="width: 50%;display: inline-block;margin: 20upx 25%;background-color: #FFFFFF;">
					<u-button type="primary" @click="AddVis">
						<!-- <u-icon name="plus-circle" color="#fff" size="28"></u-icon> -->
						修改个人信息
					</u-button>
				</view>
				<!-- <view style="width: 40%;display: inline-block;margin: 20upx 5%;background-color: #FFFFFF;">
					<u-button type="primary" @click="toVisList">
						<u-icon name="list-dot" color="#fff" size="28"></u-icon>
						访客列表
					</u-button>
				</view> -->
			</view>
		</view>

		<view v-else class="hasCustomer">

			<!-- loading -->
			<!-- {{windowHeight}} -->
			<view v-if="!AddCustomer" :style="{'margin-top': (windowHeight/2 - 150) + 'px'}" class="loading">
				<u-loading style=" margin-left: 300upx;" mode="flower" size="150"></u-loading>
			</view>
			<!-- 添加套账 -->
			<view v-else class="AddCustomer" :style="{'padding-top': (windowHeight/2 - 150) + 'px','text-align': 'center'}">
				<view style="text-align: center;font-size: 50upx;color: #ff5500;font-weight: 600;margin-bottom: 20upx;">
					当前没绑定账套,请添加账套 
				</view>
				<u-button type="success" size="medium" @click="AddCustomerFun">添加账套</u-button>
				<view style="height: 50upx;"></view>
				<u-button type="success" size="medium" @click="resfsh">刷新</u-button>
			</view>
		</view>
		<w-compress ref='wCompress' />
		
	</view>
</template>

<script>
	import http from '../../common/vmeitime-http/index.js';
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	import WCompress from '../../components/w-compress/w-compress.vue'
	import {
		Base64Encrypt,
		Base64Decrypt,
		Decrypt,
		EncryptAES,
		SHA256,
		RSA_encrypt,
		RSA
	} from '../../utils/crypto_RSA_AES.js';
	export default {
		components: {
			avatar
		},
		data() {
			return {
				windowHeight: null,
				hasCustomer: false,
				AddCustomer: false,
				hasImg: false,
				isChangeImg: false,
				PeopleID: '',
				url: '../../static/image/write.png',
				Customer: null,
				form: {
					DeptName: '',
					PName: '',
					PCode: '',
					CardData: '',
					IdentityCard: '',
					MobilePhone: '',
					PPassword: '',
				}
			}
		},
		created() {


		},
		onShow() {
			console.log(3)
			this.getData();
		},
		onReady() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowHeight = windowHeight;
		},
		onShow() {
			this.getData()
		},
		methods: {
			resfsh() {
				this.hasCustomer = false
				this.AddCustomer = false
				this.getData()
			},
			getData() {
				http.GetCustomerList().then(res => {
					console.log(res);
					this.AddCustomer = true;
					if (res.data.customerlist.length) {
						this.hasCustomer = true;
						this.Customer = res.data.customerlist[0];
						let customerlist = res.data.customerlist[0];
						this.PeopleID = customerlist.PeopleID;
						this.url = customerlist.PImage ? 'https://yun.pc15.net/OSSImage_FCARD/' + customerlist.PImage + '?' + Math.ceil(
								Math.random() * 100) : '../../static/image/write.png',
							this.form = {
								DeptName: customerlist.DeptName,
								PName: customerlist.PName,
								PCode: customerlist.PCode,
								CardData: customerlist.CardData,
								IdentityCard: customerlist.IDCode,
								MobilePhone: customerlist.MobilePhone,
								PPassword: Base64Decrypt(customerlist.PPassword, uni.getStorageSync('AKey'), uni.getStorageSync('AIV')),
							}

					} else {
						this.hasCustomer = false;
					}
				}).catch(err => {
					this.AddCustomer = false;
					console.log(err);
				});
			},
			//
			myUpload(rsp) {
				// this.url = rsp.path; //更新头像方式一
				// console.log(rsp.path)
				//rsp.avatar.imgSrc = rsp.path; //更新头像方式二
				this.isChangeImg = true;
				this.$refs.wCompress.start(rsp.path, {
						pixels: 200000, // 最大分辨率，默认二百万
						quality: .1, // 压缩质量，默认0.8
						type: 'png', // 图片类型，默认jpg
						base64: true, // 是否返回base64，默认false，非H5有效
					})
					.then(ress => {
						console.error(ress)
						this.url = ress;
					})
					.catch(e => {
						
					})
				// const imgData = uni.getFileSystemManager().readFileSync(rsp.path, 'base64');
				// const base64 = 'data:image/png;base64,' + imgData;
				// this.url = base64;
				// console.log(base64)
			},
			//
			AddVis() {
				if (this.form.PName === '') {
					uni.showToast({
						title: '请输入名称！',
						icon: 'none'
					})
					return
				}
				// console.log(this.data.Phone != '', this.data.VisitorCardNo != '', !(this.data.Phone != '' || this.data.VisitorCardNo != ''))
				if (!(this.form.MobilePhone != '' || this.form.IdentityCard != '')) {
					// Toast('请输入手机号或者证件号');
					uni.showToast({
						title: '请输入手机号或者证件号！',
						icon: 'none'
					})
					return
				}
				let d;
				if (this.form.MobilePhone !== '') {
					if (d = /^[1][3,4,5,7,8][0-9]{9}$/, !1 === d.test(this.form.MobilePhone)) return void uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none'
					});
				}


				let parma = {
					pID: this.PeopleID,
					DeptName: this.form.DeptName,
					PName: this.form.PName,
					PCode: this.form.PCode,
					CardData: this.form.CardData,
					IdentityCard: this.form.IdentityCard,
					MobilePhone: this.form.MobilePhone,
					PPassword: Base64Encrypt(this.form.PPassword, uni.getStorageSync('AKey'), uni.getStorageSync('AIV')),
				}

				http.Update(parma).then(res => {
					console.log(res.data);
					if (this.isChangeImg) {
						http.Upload({
							base64: this.url
						}).then(res => {
							console.log(res);
							if (res.data.result == 1) {
								uni.showToast({
									title: '更新信息成功',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '更新信息成功,但照片上传失败'+res.data.errDesc,
									icon: 'none'
								})
							}
						}).catch(err => {
							console.log(err);
						})
					}else{
						uni.showToast({
							title: '更新信息成功',
							icon: 'none'
						})
					}

					this.isChangeImg = false;

				}).catch(err => {
					console.log(err);
				})
			},
			//
			AddCustomerFun(){
				uni.navigateTo({
				    url: '../AddPerson/AddPerson'
				});
			},
			//
			delCustomer(){
				http.DeleteCustomer({
					CustomerID: this.Customer.CustomerID
				}).then(res=>{
					uni.showToast({
						title: '已删除',
						icon: 'none'
					})
					this.resfsh()
				})
			}
		}
	}
</script>

<style lang="scss">
	.Visitor {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		.title_top{
			margin: 10upx 0;
			width: 700upx;
			margin-left: 25upx;
			box-shadow: 0 2upx 12upx 0 rgba(0,0,0,.1);
			box-sizing: border-box;
			border-radius: 10upx;
			background-color: #fff;
			padding: 10upx 5upx;
			transition: box-shadow .5s;
			overflow: hidden;
			font-size: 20upx;
			text-align: center;
		}
		.imgBox {
			margin-left: 250upx;
			margin-top: 30upx;
			position: relative;
			width: 250upx;
			height: 333.33upx;
		}

		.clr-wrapper {
			text-align: center !important;

			>.my-slider {
				display: none !important;
			}
		}

		.Form_vis {
			width: 700upx;
			margin: 20upx 0;
			padding: 50upx 10upx;
			margin-left: 25upx;
			border-radius: 10upx;
			background-color: #fff;
			box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, .1);
			box-sizing: border-box;
			transition: box-shadow .5s;
			overflow: hidden;

			.u-form-item {
				padding: 2px 15px;
			}
		}

		.hasCustomer {
			height: 100%;
			overflow-y: auto;
			padding-bottom: 120upx;
		}

		.foot_vis {
			width: 100%;
			background-color: #fff;
			z-index: 9999;
			position: fixed;
			left: 0;
			bottom: 0;
		}
	}
</style>
